<template>
  <div class="app-container">
    <el-card>
      <el-button @click="resetQuery">
        <template #icon><i-ep-refresh /></template>
        重置</el-button
      >
      <el-button type="success" @click="openDialog(-1)"  v-hasPerm="['resource:resourceType:add']">  
        <template #icon><i-ep-plus /></template>
        新增</el-button
      >
    </el-card>

    <el-card shadow="never">
      <el-table
        v-loading="loading"
        :data="resourceList"
        highlight-current-row
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        row-key="id"
        default-expand-all
        border
      >
        <el-table-column label="分类名称" min-width="200">
          <template #default="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>

        <el-table-column label="排序" align="center" width="100" prop="sort" />

        <el-table-column fixed="right" align="center" label="操作" width="220">
          <template #default="scope">
            <el-button
              type="primary"
              link
              size="small"
              @click.stop="openDialog(scope.row.id)"   v-hasPerm="['resource:resourceType:add']"
            >
              <i-ep-plus />新增
            </el-button>

            <el-button
              type="primary"
              link
              size="small"
              @click.stop="openDialog(undefined, scope.row.id, scope.row)"   v-hasPerm="['resource:resourceType:update']"
            >
              <i-ep-edit />编辑
            </el-button>
            <el-button
              type="primary"
              link
              size="small"
              @click.stop="handleDelete(scope.row.id)"   v-hasPerm="['resource:resourceType:del']"
              ><i-ep-delete />
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      :title="dialog.title"
      v-model="dialog.visible"
      @close="closeDialog"
      destroy-on-close
      appendToBody
      width="750px"
    >
      <el-form ref="blogFormRef" :model="formData" :rules="rules" label-width="100px">
        <el-form-item label="父级分类ID" prop="parentId">
          <el-input v-model="formData.parentId" :disabled="true" />
        </el-form-item>

        <el-form-item label="分类名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入分类名称" />
        </el-form-item>

        <el-form-item label="状态" prop="sort">
          <el-input-number
            v-model="formData.status"
            style="width: 100px"
            controls-position="right"
            :min="0"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {
  getResourceList,
  deleteResource,
  editResource,
  addResource,
} from "@/api/classification";
import { classifyInfo } from "@/api/classification/type";
import { onMounted, ref, reactive } from "vue";
import { ElForm, DialogOption } from "element-plus";

const blogFormRef = ref(ElForm);

const loading = ref(false);
const dialog = reactive<DialogOption>({
  visible: false,
});

const resourceList = ref<classifyInfo[]>([]);

const formData = reactive<classifyInfo>({
  parentId: -1,
});

const paramInfo = reactive<classifyInfo>({});

const rules = reactive({
  parentId: [{ required: true, message: "请选择顶级菜单", trigger: "blur" }],
  name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
});

/**
 * 查询
 */
function handleQuery() {
  // 重置父组件
  loading.value = true;
  getResourceList()
    .then(({ data }) => {
      resourceList.value = data.resourceTypes;
    })
    .then(() => {
      loading.value = false;
    });
}

/**
 * 打开表单弹窗
 *
 * @param parentId 父分类ID
 * @param classifyId 分类ID
 */
function openDialog(parentId?: number, classifyId1?: number, paramInfo?: classifyInfo) {
  dialog.visible = true;
  if (classifyId1) {
    dialog.title = "编辑分类";
    Object.assign(formData, paramInfo);
  } else {
    dialog.title = "新增分类";
    formData.parentId = parentId;
  }
}

/**
 * 分类提交
 */
function submitForm() {
  blogFormRef.value.validate((isValid: boolean) => {
    if (isValid) {
      const classifyId = formData.id;
      if (classifyId) {
        console.log(99999);
        editResource(formData).then(() => {
          ElMessage.success("修改成功");
          closeDialog();
          handleQuery();
        });
      } else {
        addResource(formData).then(() => {
          ElMessage.success("新增成功");
          closeDialog();
          handleQuery();
        });
      }
    }
  });
}

/**
 * 删除菜单
 */
function handleDelete(classifyId: number) {
  if (!classifyId) {
    ElMessage.warning("请勾选删除项");
    return false;
  }

  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteResource(classifyId).then(() => {
        ElMessage.success("删除成功");
        handleQuery();
      });
    })
    .catch(() => ElMessage.info("已取消删除"));
}

/**
 * 关闭弹窗
 */
function closeDialog() {
  dialog.visible = false;
  resetForm();
}

/**
 * 重置表单
 */
function resetForm() {
  blogFormRef.value.resetFields();
  blogFormRef.value.clearValidate();

  formData.id = undefined;
  formData.parentId = 0;
}

function resetQuery() {
  handleQuery();
}

onMounted(() => {
  handleQuery();
});
</script>
